<template>
  <div class="addOrEditCirleFriend">
    <div class="header-top">
      <div class="head-title" @click="gotoPage()">
        <div class="backIcon"><i class="el-icon-back"></i></div>
        新建朋友圈
      </div>
    </div>
    <div class="content-big">
      <div class="tips">
        1. 每个客户每天最多可以看到同个企微号的3条朋友圈内容，超过后将不可见；
        <br/>
        2. 创建任务时，可选择离线企微号，执行发圈/追评/定时删除等任务企微号需在线，过期将不执行。
      </div>
      <div class="content-main">
        <div class="content-title">基础信息</div>
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="100px"
          label-position="left"
        >
          <div class="content-item">
            <el-form-item label="任务名称：" prop="basicInfo.taskName">
              <el-input v-model="form.basicInfo.taskName" placeholder="请输入素材分类" maxlength="20" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="分组选择：" prop="userName2">
              <el-select v-model="form.basicInfo.groupInfo" filterable placeholder="请选择分组">
                <el-option
                  v-for="item in groupList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
                <div class="other-option">
                  <a class="link">企业管理</a>
                </div>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="下发企微号：" prop="basicInfo.enterpriseInfo.ids">
            <el-button type="primary" plain @click="getSelectUser">选择企微号</el-button>
            <div class="user-images">
              <span>已选</span>
              <div class="img-li">
                <img src="../../../assets/images/profile.jpg"/>
                <img src="../../../assets/images/profile.jpg"/>
                <img src="../../../assets/images/profile.jpg"/>
                <img src="../../../assets/images/profile.jpg"/>
                <img src="../../../assets/images/profile.jpg"/>
              </div>
              <div><i class="el-icon-more"></i></div>
              <div class="number">等5个</div>
            </div>
          </el-form-item>
          <el-form-item prop="basicInfo.taskName">
            <div class="select-user">
              <div class="select-title">
                <!--              选择客户-->
                <el-form-item prop="basicInfo.enterpriseInfo.useType">
                  <el-radio-group v-model="form.basicInfo.enterpriseInfo.useType" class="budget_type">
                    <el-radio :label="Number(item.value)" v-for="(item,index) in budgetTypeList" :key="item.value">{{ item.label }}</el-radio>
                  </el-radio-group>
                </el-form-item>
                <div class="num">点此计算可见客户数</div>
              </div>
              <!--                要刷选客户的条件-->
              <div class="item-big">
                <div class="item-li">
                  <div class="item-title">条件1
                    <div class="title-right">
                      <i class="el-icon-circle-plus"></i>
                      <i class="el-icon-remove"></i>
                    </div>
                  </div>
                  <div class="condition1">
                    <div class="form-big">
                      <el-form-item label="企微标签" class="item-left">
                        <el-select v-model="form.basicInfo" filterable placeholder="请选择企微标签">
                          <el-option
                            v-for="item in wxLabelList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item class="item-right">
                        <MultipleSelect size="small" placeholder='企微标签' :receiverNameOpt='lableOpt'/>
                      </el-form-item>
                    </div>
                    <div class="form-big">
                      <el-form-item label="智能标签" prop="basicInfo.enterpriseInfo.useType" class="item-left">
                        <el-select v-model="form.basicInfo" filterable placeholder="请选择企微标签" size="small">
                          <el-option
                            v-for="item in wxLabelList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item class="item-right">
                        <MultipleSelect size="small" placeholder='企微标签' :receiverNameOpt='lableOpt'/>
                      </el-form-item>
                    </div>
                    <div class="form-big">
                      <el-form-item label="加好友时间" prop="basicInfo.enterpriseInfo.useType">
                        <el-date-picker
                          v-model="dateRange1"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          type="datetimerange"
                          range-separator="-"
                          size="small"
                          start-placeholder="开始时间"
                          end-placeholder="结束时间"
                        ></el-date-picker>
                      </el-form-item>
                    </div>
                    <div class="form-big">
                      <el-form-item label="备注" prop="basicInfo.enterpriseInfo.useType">
                        <el-select
                          v-model="dateRange1"
                          size="small"
                          placeholder="请选择备注"
                        >
                          <el-option
                            v-for="item in msgTypeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          >
                          </el-option>
                        </el-select>
                        <div class="label-big">
                          <el-input placeholder="可输入多个，按enter确认" v-model="input3" size="small">
                            <el-button slot="append" icon="el-icon-plus" size="small"></el-button>
                          </el-input>
                          <div class="label-list">
                            <span>一般 <i class="el-icon-close"></i></span>
                            <span>重要 <i class="el-icon-close"></i></span>
                            <span>核心<i class="el-icon-close"></i></span>
                          </div>
                        </div>

                      </el-form-item>
                    </div>
                    <div class="form-big">
                      <el-form-item label="性别">
                        <el-select
                          v-model="dateRange1"
                          placeholder="请选择备注"
                          size="small"
                        >
                          <el-option
                            v-for="item in sexList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </div>
                  <div class="condition2">
                    <!--                     排除一下客户-->
                    <el-form-item prop="basicInfo.enterpriseInfo.useType">
                      <el-checkbox v-model="checked"> 排除一下符合条件的的客户</el-checkbox>
                    </el-form-item>
                    <div class="form-big">
                      <el-form-item label="企微标签" class="item-left">
                        <el-select v-model="form.basicInfo" filterable placeholder="请选择企微标签">
                          <el-option
                            v-for="item in wxLabelList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item class="item-right">
                        <MultipleSelect size="small" placeholder='企微标签' :receiverNameOpt='lableOpt'/>
                      </el-form-item>
                    </div>
                    <div class="form-big">
                      <el-form-item label="智能标签" prop="basicInfo.enterpriseInfo.useType" class="item-left">
                        <el-select v-model="form.basicInfo" filterable placeholder="请选择企微标签" size="small">
                          <el-option
                            v-for="item in wxLabelList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item class="item-right">
                        <MultipleSelect size="small" placeholder='企微标签' :receiverNameOpt='lableOpt'/>
                      </el-form-item>
                    </div>
                    <div class="form-big">
                      <el-form-item label="加好友时间" prop="basicInfo.enterpriseInfo.useType">
                        <el-date-picker
                          v-model="dateRange1"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          type="datetimerange"
                          range-separator="-"
                          size="small"
                          start-placeholder="开始时间"
                          end-placeholder="结束时间"
                        ></el-date-picker>
                      </el-form-item>
                    </div>
                    <div class="form-big">
                      <el-form-item label="备注" prop="basicInfo.enterpriseInfo.useType">
                        <el-select
                          v-model="dateRange1"
                          size="small"
                          placeholder="请选择备注"
                        >
                          <el-option
                            v-for="item in msgTypeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          >
                          </el-option>
                        </el-select>
                        <div class="label-big">
                          <el-input placeholder="可输入多个，按enter确认" v-model="input3" size="small">
                            <el-button slot="append" icon="el-icon-plus" size="small"></el-button>
                          </el-input>
                          <div class="label-list">
                            <span>一般 <i class="el-icon-close"></i></span>
                            <span>重要 <i class="el-icon-close"></i></span>
                            <span>核心<i class="el-icon-close"></i></span>
                          </div>
                        </div>

                      </el-form-item>
                    </div>
                    <div class="form-big">
                      <el-form-item label="性别">
                        <el-select
                          v-model="dateRange1"
                          placeholder="请选择备注"
                          size="small"
                        >
                          <el-option
                            v-for="item in sexList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </div>
                </div>
                <div class="item-li">
                  <el-button type="primary" class="symbol"><span>或</span><i class="el-icon-sort"></i></el-button>
                  <div class="item-title">条件2
                    <div class="title-right">
                      <i class="el-icon-circle-plus"></i>
                      <i class="el-icon-remove"></i>
                    </div>
                  </div>
                  <div class="condition1">
                    <div class="form-big">
                      <el-form-item label="企微标签" class="item-left">
                        <el-select v-model="form.basicInfo" filterable placeholder="请选择企微标签">
                          <el-option
                            v-for="item in wxLabelList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item class="item-right">
                        <MultipleSelect size="small" placeholder='企微标签' :receiverNameOpt='lableOpt'/>
                      </el-form-item>
                    </div>
                    <div class="form-big">
                      <el-form-item label="智能标签" prop="basicInfo.enterpriseInfo.useType" class="item-left">
                        <el-select v-model="form.basicInfo" filterable placeholder="请选择企微标签" size="small">
                          <el-option
                            v-for="item in wxLabelList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item class="item-right">
                        <MultipleSelect size="small" placeholder='企微标签' :receiverNameOpt='lableOpt'/>
                      </el-form-item>
                    </div>
                    <div class="form-big">
                      <el-form-item label="加好友时间" prop="basicInfo.enterpriseInfo.useType">
                        <el-date-picker
                          v-model="dateRange1"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          type="datetimerange"
                          range-separator="-"
                          size="small"
                          start-placeholder="开始时间"
                          end-placeholder="结束时间"
                        ></el-date-picker>
                      </el-form-item>
                    </div>
                    <div class="form-big">
                      <el-form-item label="备注" prop="basicInfo.enterpriseInfo.useType">
                        <el-select
                          v-model="dateRange1"
                          size="small"
                          placeholder="请选择备注"
                        >
                          <el-option
                            v-for="item in msgTypeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          >
                          </el-option>
                        </el-select>
                        <div class="label-big">
                          <el-input placeholder="可输入多个，按enter确认" v-model="input3" size="small">
                            <el-button slot="append" icon="el-icon-plus" size="small"></el-button>
                          </el-input>
                          <div class="label-list">
                            <span>一般 <i class="el-icon-close"></i></span>
                            <span>重要 <i class="el-icon-close"></i></span>
                            <span>核心<i class="el-icon-close"></i></span>
                          </div>
                        </div>

                      </el-form-item>
                    </div>
                    <div class="form-big">
                      <el-form-item label="性别">
                        <el-select
                          v-model="dateRange1"
                          placeholder="请选择备注"
                          size="small"
                        >
                          <el-option
                            v-for="item in sexList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </div>
                  <div class="condition2">

                    <!--                     排除一下客户-->
                    <el-form-item prop="basicInfo.enterpriseInfo.useType">
                      <el-checkbox v-model="checked"> 排除一下符合条件的的客户</el-checkbox>
                    </el-form-item>
                    <div class="form-big">
                      <el-form-item label="企微标签" class="item-left">
                        <el-select v-model="form.basicInfo" filterable placeholder="请选择企微标签">
                          <el-option
                            v-for="item in wxLabelList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item class="item-right">
                        <MultipleSelect size="small" placeholder='企微标签' :receiverNameOpt='lableOpt'/>
                      </el-form-item>
                    </div>
                    <div class="form-big">
                      <el-form-item label="智能标签" prop="basicInfo.enterpriseInfo.useType" class="item-left">
                        <el-select v-model="form.basicInfo" filterable placeholder="请选择企微标签" size="small">
                          <el-option
                            v-for="item in wxLabelList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item class="item-right">
                        <MultipleSelect size="small" placeholder='企微标签' :receiverNameOpt='lableOpt'/>
                      </el-form-item>
                    </div>
                    <div class="form-big">
                      <el-form-item label="加好友时间" prop="basicInfo.enterpriseInfo.useType">
                        <el-date-picker
                          v-model="dateRange1"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          type="datetimerange"
                          range-separator="-"
                          size="small"
                          start-placeholder="开始时间"
                          end-placeholder="结束时间"
                        ></el-date-picker>
                      </el-form-item>
                    </div>
                    <div class="form-big">
                      <el-form-item label="备注" prop="basicInfo.enterpriseInfo.useType">
                        <el-select
                          v-model="dateRange1"
                          size="small"
                          placeholder="请选择备注"
                        >
                          <el-option
                            v-for="item in msgTypeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          >
                          </el-option>
                        </el-select>
                        <div class="label-big">
                          <el-input placeholder="可输入多个，按enter确认" v-model="input3" size="small">
                            <el-button slot="append" icon="el-icon-plus" size="small"></el-button>
                          </el-input>
                          <div class="label-list">
                            <span>一般 <i class="el-icon-close"></i></span>
                            <span>重要 <i class="el-icon-close"></i></span>
                            <span>核心<i class="el-icon-close"></i></span>
                          </div>
                        </div>

                      </el-form-item>
                    </div>
                    <div class="form-big">
                      <el-form-item label="性别">
                        <el-select
                          v-model="dateRange1"
                          placeholder="请选择备注"
                          size="small"
                        >
                          <el-option
                            v-for="item in sexList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="content-main">
        <div class="content-title">朋友圈</div>
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="100px"
          label-position="left"
        >
          <el-form-item label="发送内容" prop="status">
            <quill-editor v-model="form.noticeContent8"
                          ref="myQuillEditor"
                          :options="editorOption"
                          @blur="onEditorBlur($event)"
                          @focus="onEditorFocus($event)"
                          @change="onEditorChange($event)">
            </quill-editor>
          </el-form-item>
          <el-form-item prop="status">
            <el-radio-group v-model="type" class="budget_type">
              <el-radio :label="Number(item.value)" v-for="(item,index) in fileTypeList" :key="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
            <template v-if="type==2">
              <ImageUpload v-model="form.src" :limit='1' type='small' :isShowTip='false'/>
            </template>
            <template v-if="type==3">
              <VideoUpload
                v-model="form.src"
                :limit="1"
                :fileType="['mp4', 'mov', 'avi']"
              />
            </template>
            <template v-if="type==4">
              <div>
                <el-button plain @click="getlink">添加链接</el-button>
              </div>
            </template>
          </el-form-item>
          <el-form-item label="发送时间：" prop="userName2">
            <el-select v-model="form.basicInfo.groupInfo" filterable placeholder="请选择发送类型">
              <el-option
                v-for="item in groupList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
              <div class="other-option">
                <a class="link">企业管理</a>
              </div>
            </el-select>
          </el-form-item>
          <el-form-item label="发布日期：" prop="userName2">
            <el-date-picker
              v-model="dataTime"
              value-format="yyyy-MM-dd"
              type="date"
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div class="content-main">
        <div class="content-title">追加评论设置</div>
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="100px"
          label-position="left"
        >
          <el-form-item label="第一条评论" prop="status">
            <quill-editor v-model="form.noticeContent"
                          ref="myQuillEditor"
                          :options="editorOption"
                          @blur="onEditorBlur($event)"
                          @focus="onEditorFocus($event)"
                          @change="onEditorChange($event)">
            </quill-editor>
            <div class="speek-big">评论时间：第1条评论发布后
              <div class="speek-item">
                <el-input v-model="form.noticeContent3" placeholder="请输入" size="small"/>
                <el-select
                  v-model="dateRange1"
                  placeholder="请选择"
                  size="small"
                >
                  <el-option
                    v-for="item in timeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>

            </div>
          </el-form-item>
        </el-form>
        <div class="time-big"><i class="el-icon-plus"></i>添加一条追评</div>
      </div>
      <div class="content-main">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="100px"
          label-position="left"
          style="padding:0px"
        >
          <div class="content-title" style=" padding: 8px 20px">
            <el-form-item label="定时删除" prop="status" style="margin-bottom: 0px">
              <el-switch
                v-model="form.open">
              </el-switch>
            </el-form-item>
          </div>
          <el-form-item label="删除时间：" prop="status" style=" padding: 8px 20px">
            <div class="speek-content">
              员工发朋友圈或者评论后
              <div class="speek-item">
                <el-input v-model="form.noticeContent1" placeholder="请输入" size="small"/>
                <div style="background: #f7f7f7;color: #888; display: inline-flex; padding: 0px 10px">小时</div>
              </div>
            </div>
            <div class="tips-item">
              <p>【未设置追评】：在朋友圈发布后1小时删除朋友圈；</p>
              <p>【有设置追评】：在最后一条追评发布后1小时删除朋友圈（追评也会一起删除）。</p>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="footer-btn">
      <el-button @click="handleCloseDialog">取消</el-button>
      <el-button type="primary" @click="onSubmit('form')">提交并发送</el-button>
    </div>
    <!--    添加链接-->
    <ReplyLink v-if="showReplyLink" :visableIf.sync="showReplyLink"></ReplyLink>
    <!-- 选择企微号-->
    <selectByUser v-if="showSelectByUser" :visableIf.sync="showSelectByUser"></selectByUser>
  </div>
</template>

<script>
// 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {quillEditor, Quill} from 'vue-quill-editor';
import quillEmoji from 'quill-emoji'
import 'quill-emoji/dist/quill-emoji.css'

Quill.register('modules/quillEmoji', quillEmoji)
import VideoUpload from "@/components/VideoUpload/index";

export default {
  name: 'addOrEditCirleFriend',
  components: {
    quillEditor,
    VideoUpload,
    'ReplyLink': () => import('./ReplyLink.vue'),//导出弹窗
    'selectByUser': () => import('./selectByUser.vue'),//导出弹窗
    'MultipleSelect': () => import('@/views/components/multipleSelect.vue'),//导出弹窗
    'viewConditions': () => import('./viewConditions.vue'),//导出弹窗
  },
  data() {
    return {
      showViewConditions: false,
      showReplyLink: false,
      showSelectByUser: false,
      active: 0,
      input3: null,
      type: 0,
      timeData: null,//发布日期
      dataTime: null,
      editorOption: {
        placeholder: "输入内容...",
        modules: {
          'emoji-toolbar': true,
          'emoji-shortname': true,
          toolbar: {
            container: [
              //  ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
              // ['blockquote', 'code-block'], //引用，代码块
              // [{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、2表示字体大小
              // [{ 'list': 'ordered' }, { 'list': 'bullet' }], //列表
              // [{ 'script': 'sub' }, { 'script': 'super' }], // 上下标
              //  [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
              // [{ 'direction': 'rtl' }], // 文本方向
              //  [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
              //  [{ 'header': [1, 2, 3, 4, 5, 6, false] }], //几级标题
              //   [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
              //  [{ 'font': [] }], //字体
              //  [{ 'align': [] }], //对齐方式
              //  ['clean'], //清除字体样式
              //  ['image', 'video'] //上传图片、上传视频
              ['emoji'],//表情包
            ], // 工具栏
          },
        }, //编辑器配置项
      },
      sexList: [
        //性别
        {id: 1, name: "男"},
        {id: 2, name: "女"},
        {id: 3, name: "未知"},
      ],
      timeList: [
        {id: 1, name: "分钟"},
        {id: 2, name: "秒"},
      ],
      msgTypeList: [
        //有无备注
        {id: 1, name: "有备注"},
        {id: 2, name: "无备注"},
      ],
      pushTimeList: [
        //有无备注
        {id: 1, name: "立即发布"},
        {id: 2, name: "定时发布"},
      ],
      dateRange1: [],
      checked: true,
      fileTypeList: [
        {value: 1, label: "无"},
        {value: 2, label: "图片"},
        {value: 3, label: "视频"},
        {value: 4, label: "链接"},
        {value: 5, label: "视频号"},
      ],
      form: {
        basicInfo: {
          taskName: null,//任务名称
          groupInfo: null,//分组信息
          enterpriseInfo: {
            //企微号信息
            ids: [],//选择的人员
            useType: 1,//客户范围
            condition: [{
              qwLabel: null,//企微标签
            }]
          }
        }
      },
      lableOpt: [
        {
          value: 1, label: '客户等级', children: [
            {value: 3, label: '核心',},
            {value: 4, label: '重要',},
            {value: 5, label: '一般',}
          ]
        },
        {
          value: 2, label: '客户等级2', children: [
            {value: 6, label: '可爱',},
            {value: 7, label: '知性',},
            {value: 8, label: '性感',}
          ]
        }
      ],
      budgetTypeList: [
        {
          label: '所有客户',
          value: 0,
        },
        {
          label: '筛选客户',
          value: 1,
        }
      ],//
      groupList: [
        //群查找
        {value: 1, label: "技术部"},
        {value: 2, label: "人事部"},
      ],
      wxLabelList: [
        //群查找
        {value: 1, label: "含任意标签"},
        {value: 2, label: "含所有标签"},
        {value: 3, label: "未打标签"},
      ],
      rules: {
        'basicInfo.taskName': [
          {required: true, message: '请输入任务名称', trigger: 'blur'}
        ],
        'basicInfo.groupInfo': [
          {required: true, message: '请选择分组', trigger: 'blur'}
        ],
        'basicInfo.groupInfo.enterpriseInfo.ids': [
          {required: true, message: '请选择下发的企微号', trigger: 'blur'}
        ],
        'basicInfo.groupInfo.enterpriseInfo.useType': [
          {required: true, message: '请选择客户范围', trigger: 'blur'}
        ],

      },
    }
  },
  created() {
  },
  mounted() {


  },
  watch: {
    'form.noticeContent'(val) {
      console.log('编辑器的内容', val);
      this.setCursorToEnd();
    }
  },
  methods: {
    setCursorToEnd() {
      // 获取quill实例
      const quill = this.$refs.myQuillEditor.quill;
      // 设置光标位置在最后
      const length = quill.getLength();
      console.log('length光标长度', length);
      this.$nextTick(() => {
        quill.setSelection(length + 1, length + 1);
      })

    },
    getSelectUser() {
      //选择企微号
      this.showSelectByUser = true;
    },
    getlink() {
      this.showReplyLink = true;
    },
    onEditorBlur() {
    }, // 失去焦点触发事件
    onEditorFocus() {
    }, // 获得焦点触发事件
    onEditorChange() {
    }, // 内容改变触发事件
    onSubmit(formName) {
      //提交的代码
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('提交表单');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    gotoPage() {
      this.$router.push({
        path: '/customerOperationsMgt/circleFriendsMgt/circleFriendsMgt',
        query: {
          urlActive: 0,
        }
      })
    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false);
      this.$emit('handleQuery');
    }
  }
}
</script>

<style scoped lang="scss">
.other-option {
  height: 30px;
  display: flex;
  align-items: center;
  color: #2d8cf0;
  font-size: 14px;
  margin-left: 15px;
  border-top: 1px solid #eee;
}

.tips {
  display: block;
  background: #fed;
  border-radius: 2px;
  border: 1px solid #ffdbb6;
  font-size: 12px;
  display: flex;
  align-items: center;
  padding: 10px 20px;
  width: 1000px;
  margin: 20px auto;
  font-size: 14px;
}

.content-big {
  height: calc(100vh - 150px);
  overflow-y: auto;
  width: 1000px;
  margin: auto;
  overflow-x: hidden;
}

.content-main {
  background: #fff;
  padding-bottom: 12px;
  margin-bottom: 12px;

  .content-title {
    font-size: 14px;
    border-bottom: 1px solid #eee;
    padding: 14px 20px;
    margin-bottom: 20px;
  }

  .el-form {
    padding: 0px 40px;

  }

}

.header-top {
  height: 46px;
  background: #fff;
  border-bottom: 1px solid #e9e9e9;
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px;

  .head-title {
    font-size: 14px;
    line-height: 22px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    font-weight: bold;

    .backIcon {
      display: flex;
      align-items: center;
      padding: 0;
      margin-right: 12px;
      border: none;
      width: 24px;
      height: 24px;
      background: #4b5a95;
      border-radius: 12px;
      cursor: pointer;
      justify-content: center;
    }

    i {
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      color: #fff;
    }
  }

}

.label-list {
  label {
    font-size: 14px;
    line-height: 1.5715;
    word-wrap: break-word;
    font-weight: 400;
  }

  span {
    margin: 4px 4px 4px 0;
    font-size: 12px;
    height: 25px;
    line-height: 25px;
    white-space: nowrap;
    background: #f0f0f0;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
    padding: 0px 7px;
    display: inline-block;

  }
}

.user-images {
  height: 50px;
  display: flex;
  align-items: center;
  border: 1px solid #eee;
  padding: 0px 10px;
  color: #888;
  margin-top: 10px;

  .number {
    margin-left: 10px;
  }

  .img-li {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 5px;
    overflow: hidden;
    border-radius: 2px;

    img {
      width: 24px;
      height: 24px;
      object-fit: cover;
      margin: 0px 2px;
    }
  }
}

.select-user {
  border: 1px solid #eee;

  .select-title {
    height: 50px;
    display: flex;
    align-items: center;
    background: #f5f6f7;
    border-radius: 2px;
    border: 1px solid #e9e9e9;
    justify-content: space-between;
    padding: 0 16px;

    .num {
      color: #3b74ff;
    }

    ::v-deep .el-form-item__content {
      border-radius: 30px;
      height: 35px;
      display: flex;
      align-items: center;
      background: #fff;
      border: 1px solid #eee;
      padding: 0px 20px;
    }
  }

  .item-big {
    padding: 0px 20px;

    .item-li {
      padding-top: 10px;

      .symbol {
        margin-bottom: 10px;
      }

      .item-title {
        height: 40px;
        border: 1px solid #eee;
        padding: 0px 10px;
        display: flex;
        justify-content: space-between;

        .title-right {
          display: flex;
          justify-content: space-between;
          align-items: center;

          i {
            font-size: 24px;
            color: #3070ff;
            margin: 0px 10px;
          }
        }

      }

      .form-big {
        display: flex;
        margin-bottom: 10px;
        margin-top: 10px;
        width: 500px;

        .el-form-item {
          width: 100%;
        }

        .item-left {
          width: 250px;
          margin-right: 10px;

          ::v-deep .el-input__inner {
            height: 32px;
            line-height: 32px;
          }
        }

        .item-right {
          flex: 1;

        }
      }

      .el-select {
        width: 100%;
      }
    }
  }

  .label-big {
    width: 400px;
    margin-top: 10px;
  }
}

.condition1 {
  border: 1px solid #eee;
  padding: 20px;
  background: #f9f9f9;
}

.condition2 {
  border-bottom: 1px solid #eee;
  padding: 20px;
  padding-bottom: 0px;
  margin-bottom: 10px;
  background: #f9f9f9;
}

/* 通过外部CSS设置编辑器大小 */
::v-deep .ql-editor {
  height: 200px;
}

.speek-big {
  border: 1px solid #eee;
  display: flex;
  padding: 5px 0px;
  color: rgba(6, 15, 35, .45);
  padding-left: 10px;

  .speek-item {
    margin-left: 10px;
    border: 1px solid #ccc;
    overflow: hidden;
    height: 32px;
    line-height: 32px;
    border-radius: 4px;

    .el-input {
      width: 80px;

      ::v-deep .el-input__inner {
        border: none;
      }
    }

    .el-select {
      border: none;
      width: 90px;

      background: #f7f7f7;

      ::v-deep .el-input__inner {
        background: #f7f7f7;
        border: none;
      }
    }
  }
}

.speek-content {
  display: flex;
  padding: 5px 0px;
  color: rgba(6, 15, 35, .6);
  padding-left: 10px;

  .speek-item {
    margin-left: 10px;
    border: 1px solid #ccc;
    overflow: hidden;
    height: 32px;
    line-height: 32px;
    border-radius: 4px;

    .el-input {
      width: 80px;

      ::v-deep .el-input__inner {
        border: none;
      }
    }

    .el-select {
      border: none;
      width: 90px;

      background: #f7f7f7;

      ::v-deep .el-input__inner {
        background: #f7f7f7;
        border: none;
      }
    }
  }
}

//.speek-content {
//  display: flex;
//  .speek-item {
//    margin-left: 10px;
//    .el-input {
//      width: 80px;
//    }
//    .el-select {
//      width: 90px;
//      background: #f7f7f7;
//    }
//  }
//}
.tips-item {
  margin-top: 20px;

  p {
    margin: 0px 0px 0px 0px;
    line-height: 25px;
    color: rgba(6, 15, 35, 0.45);
  }

}

.time-big {
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #e9e9e9;
  font-size: 14px;
  margin: 10px 30px 30px 80px;
  cursor: pointer;


}

.footer-btn {
  position: absolute;
  left: 0px;
  right: 0px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.addOrEditCirleFriend {
  position: relative;
  padding-bottom: 50px;
}
</style>
